<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>{% block title %}漫画阅读器{% endblock %}</title>
    
    <!-- CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/mobile.css') }}">
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='images/icons/favicon.ico') }}">
    
    {% block head %}{% endblock %}
</head>
<body class="{% block body_class %}{% endblock %}">
    <!-- 导航栏 -->
    <nav class="navbar" id="navbar">
        <div class="nav-container">
            <div class="nav-brand">
                <a href="{{ url_for('main.index') }}">
                    <span class="brand-icon">📚</span>
                    <span class="brand-text">漫画阅读器</span>
                </a>
            </div>
            
            <div class="nav-menu" id="nav-menu">
                <a href="{{ url_for('main.index') }}" class="nav-link {% if request.endpoint == 'main.index' %}active{% endif %}">
                    <span class="nav-icon">🏠</span>
                    <span class="nav-text">首页</span>
                </a>
                <a href="{{ url_for('main.comic_list') }}" class="nav-link {% if request.endpoint == 'main.comic_list' %}active{% endif %}">
                    <span class="nav-icon">📖</span>
                    <span class="nav-text">漫画</span>
                </a>
                <a href="{{ url_for('main.scan_comics') }}" class="nav-link">
                    <span class="nav-icon">🔄</span>
                    <span class="nav-text">扫描</span>
                </a>
                <a href="{{ url_for('main.settings') }}" class="nav-link {% if request.endpoint == 'main.settings' %}active{% endif %}">
                    <span class="nav-icon">⚙️</span>
                    <span class="nav-text">设置</span>
                </a>
            </div>
            
            <div class="nav-toggle" id="nav-toggle">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="main-content" id="main-content">
        <!-- 消息提示 -->
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                <div class="flash-messages">
                    {% for category, message in messages %}
                        <div class="flash-message flash-{{ category }}">
                            <span class="flash-text">{{ message }}</span>
                            <button class="flash-close" onclick="this.parentElement.remove()">×</button>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        {% endwith %}
        
        {% block content %}{% endblock %}
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="footer-content">
            <p>&copy; 2024 漫画阅读器 - 基于Python Flask构建</p>
        </div>
    </footer>

    <!-- 加载指示器 -->
    <div class="loading-overlay" id="loading-overlay">
        <div class="loading-spinner">
            <div class="spinner"></div>
            <div class="loading-text">加载中...</div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="{{ url_for('static', filename='js/comic-reader.js') }}"></script>
    {% block scripts %}{% endblock %}

    <script>
        // 全局配置
        window.ComicReader = window.ComicReader || {};
        window.ComicReader.config = {
            apiBase: '/api',
            imageQuality: 85,
            preloadPages: 2,
            cacheTimeout: 3600000, // 1小时
            touchSensitivity: 50
        };

        // 初始化应用
        document.addEventListener('DOMContentLoaded', function() {
            // 导航菜单切换
            const navToggle = document.getElementById('nav-toggle');
            const navMenu = document.getElementById('nav-menu');
            
            if (navToggle && navMenu) {
                navToggle.addEventListener('click', function() {
                    navMenu.classList.toggle('active');
                    navToggle.classList.toggle('active');
                });
            }

            // 自动隐藏flash消息
            const flashMessages = document.querySelectorAll('.flash-message');
            flashMessages.forEach(function(message) {
                setTimeout(function() {
                    message.style.opacity = '0';
                    setTimeout(function() {
                        message.remove();
                    }, 300);
                }, 5000);
            });

            // 页面加载完成后隐藏加载指示器
            const loadingOverlay = document.getElementById('loading-overlay');
            if (loadingOverlay) {
                loadingOverlay.style.display = 'none';
            }
        });

        // 显示/隐藏加载指示器
        function showLoading(text = '加载中...') {
            const overlay = document.getElementById('loading-overlay');
            const textElement = overlay.querySelector('.loading-text');
            if (textElement) textElement.textContent = text;
            overlay.style.display = 'flex';
        }

        function hideLoading() {
            const overlay = document.getElementById('loading-overlay');
            overlay.style.display = 'none';
        }

        // 错误处理
        window.addEventListener('error', function(e) {
            console.error('页面错误:', e.error);
            hideLoading();
        });

        // 网络状态检测
        window.addEventListener('online', function() {
            console.log('网络已连接');
        });

        window.addEventListener('offline', function() {
            console.log('网络已断开');
            alert('网络连接已断开，部分功能可能无法正常使用');
        });
    </script>
</body>
</html>